<template>
	<el-container style="padding: 20px">
		<el-header>
			<el-button size="mini" type="primary" @click="editInfo('新增')" icon="el-icon-circle-plus-outline">新 增</el-button>
			<el-form label-width="100px">
				<el-form-item label="管理人简称：" style="margin-bottom: 0">
					<el-input size="medium" v-model="managementName" @input="searchClick()"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
				</el-form-item>
			</el-form>
		</el-header>
		<el-main>
			<el-table
				:data="managementList"
				border
				:header-cell-style="{ background: '#FAFAFA' }"
				v-loading="searchLoading"
				element-loading-text="正在加载数据，请耐心等待......"
				element-loading-spinner="el-icon-loading"
				element-loading-background="rgba(0, 0, 0, 0.8)"
			>
				<el-table-column prop="wdComId" v-if="false" label="万德公司代码" width="0"></el-table-column>
				<el-table-column prop="managementRegisterNumber" label="管理人代码(统一社会信用编码)" width="250"></el-table-column>
				<el-table-column prop="managementName" label="管理人简称" width="210">
					<template slot-scope="scope">
						<hintCom :item="scope.row" property="managementName" :index="scope.$index" />
					</template>
				</el-table-column>
				<el-table-column prop="managementFullName" label="管理人全称" width="210">
					<template slot-scope="scope">
						<hintCom :item="scope.row" property="managementFullName" :index="scope.$index" />
					</template>
				</el-table-column>
				<el-table-column prop="managementEnglishName" label="管理人英文名称" width="210">
					<template slot-scope="scope">
						<hintCom :item="scope.row" property="managementEnglishName" :index="scope.$index" />
					</template>
				</el-table-column>
				<el-table-column prop="organCode" label="组织机构代码" width="150"></el-table-column>
				<el-table-column prop="foundDate" label="成立日期" width="150">
					<template slot-scope="scope">
						{{ scope.row.foundDate | timerConversionStr }}
					</template>
				</el-table-column>
				<el-table-column prop="address" label="办公地址" width="300">
					<template slot-scope="scope">
						<hintCom :item="scope.row" property="address" :index="scope.$index" />
					</template>
				</el-table-column>
				<el-table-column prop="chairman" label="法人代表" width="150"></el-table-column>
				<el-table-column prop="president" label="总经理" width="150"></el-table-column>
				<el-table-column prop="briefing" label="公司简介" width="300">
					<template slot-scope="scope">
						<hintCom :item="scope.row" property="briefing" :index="scope.$index" />
					</template>
				</el-table-column>
				<el-table-column prop="phone" label="联系电话" width="180">
					<template slot-scope="scope">
						<hintCom :item="scope.row" property="phone" :index="scope.$index" />
					</template>
				</el-table-column>
				<el-table-column prop="fax" label="传真" width="180">
					<template slot-scope="scope">
						<hintCom :item="scope.row" property="fax" :index="scope.$index" />
					</template>
				</el-table-column>
				<el-table-column prop="email" label="邮箱" width="180">
					<template slot-scope="scope">
						<hintCom :item="scope.row" property="email" :index="scope.$index" />
					</template>
				</el-table-column>
				<el-table-column prop="operation" label="操作" fixed="right" width="180">
					<template slot-scope="scope">
						<el-button size="mini" icon="el-icon-edit" type="primary" @click="editInfo('修改', scope.row)">修改</el-button>
						<!-- <el-button size="mini" type="danger" icon="el-icon-delete" class="delebtn" @click="delInfo(scope.row.managementId)">删除</el-button> -->
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				background
				:page-size="paging.size"
				:disabled="searchLoading"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
				:current-page="paging.num"
				:page-sizes="paging.sizes"
				layout="sizes,prev,pager,next,jumper,total"
				:total="paging.total"
			/>
		</el-main>
		<managerInfo :title="title" :addComShow="addComShow" @comIsShow="comIsShow" @queryFundManagerList="getManagementList" ref="managerInfo" />
	</el-container>
</template>
<script>
	import { delManagementInfo } from '@/api/productApi/mechanism'
	import { getManagementList } from '@/api/productApi/mechanism'
	import managerInfo from './components/index'
	import { debounce } from '@/utils/debounceFunc'
	import { SpecialReplace } from '@/utils/characters'
	export default {
		name: 'ManagerInformation',
		components: {
			managerInfo
		},
		data() {
			return {
				managementName: '',
				managementList: [],
				registerNumber: '', // 搜索参数:管理人代码
				// 分页配置
				paging: {
					// 显示的条目数
					size: 10,
					// 当前页数
					num: 1,
					total: 0,
					pages: 0,
					sizes: [10, 20, 50, 100]
				},
				title: '',
				addComShow: false,
				searchLoading: false,
				cacheData: [] // 缓存最新输入的值
			}
		},
		mounted() {
			this.getManagementList()
		},
		methods: {
			// 查询：管理人列表
			getManagementList: debounce(function() {
				if (SpecialReplace(this.managementName, false)) {
					return
				}
				const params = {}
				params.managementName = this.managementName
				params.managementRegisterNumber = this.registerNumber
				this.searchLoading = true
				this.cacheData = []
				getManagementList(params, this.paging)
					.then(res => {
						if (res.msgCode === 'Y') {
							this.paging.total = res.data.page.total
							this.managementList = res.data.body
						} else {
							this.$message({ message: res.msgDesc, type: 'error' })
						}
					})
					.finally(() => {
						if (!this.cacheData.length) {
							this.searchLoading = false
						}
						if (this.cacheData.length && this.searchLoading) {
							this.getManagementList()
						}
					})
			}, 10),
			delInfo(id) {
				this.operatorComfirm(() => {
					delManagementInfo({ managementId: id }).then(res => {
						if (res.msgCode === 'Y') {
							if (this.paging.total === 11) {
								this.paging.num = 1
							}
							this.$message({ message: res.msg, type: 'success' })
							this.getManagementList()
						} else {
							this.$message({ message: res.msgDesc, type: 'error' })
						}
					})
				}, '删除该管理人信息')
			},
			editInfo(title, item) {
				this.title = title
				this.comIsShow()
				if (item) {
					this.$refs.managerInfo.edit(JSON.stringify(item))
				}
			},
			comIsShow() {
				this.addComShow = !this.addComShow
			},
			// 搜索
			searchClick: debounce(function() {
				this.paging.num = 1
				this.cacheData = [this.managementName]
				if (!this.searchLoading) {
					this.getManagementList()
				}
			}, 1),
			// 改变页数
			handleCurrentChange(val) {
				this.paging.num = val
				this.getManagementList()
			},
			// 改变条数
			handleSizeChange(val) {
				this.paging.num = 1
				this.paging.size = val
				this.getManagementList()
			}
		}
	}
</script>
<style lang="scss" scoped src='./index.scss'>
</style>
